<template>
  <div class="element-transfer">
    <!-- 穿梭框 -->
    <h2>基础穿梭框</h2>
    <el-transfer v-model="value" :data="data" />
    <h2>可搜索穿梭框</h2>
    <el-transfer
      v-model="value2"
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入城市拼音"
      :data="data2"
    />
    <h2>render-content 自定义数据项</h2>
    <div style="text-align: center">
      <el-transfer
        v-model="leftValue"
        style="text-align: left; display: inline-block"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :render-content="renderFunc"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        :data="data"
        @change="handleChange"
      >
        <template #left-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
      </el-transfer>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'ElementTransfer',
  data() {
    const generateData = () => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        })
      }
      return data
    }
    return {
      data: generateData(),
      value: [1, 4],
      leftValue: [1],
      rightValue: [1],
      renderFunc(h, option) {
        return h('span', null, option.key, ' - ', option.label)
      }
    }
  },
  setup() {
    const generateData1 = () => {
      let data = reactive([])
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        })
      }
      return data
    }
    let data1 = generateData1()
    data1 = reactive(data1)
    let value1 = reactive([1, 4])
    const generateData2 = () => {
      const data = []
      const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
      const spell = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          spell: spell[index]
        })
      })
      return data
    }
    let data2 = reactive(generateData2())
    let value2 = reactive([1])
    const filterMethod = (query, item) => {
      return item.spell.indexOf(query) > -1
    }
    const handleChange = (value, direction, movedKeys) => {
      console.log(value, direction, movedKeys)
    }
    return {
      data1,
      value1,
      data2,
      value2,
      filterMethod,
      handleChange
    }
  }
}
</script>
<style lang="scss">
.element-transfer {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  text-align: left;
  h2 {
    margin: 10px 0;
  }
}
</style>
